<script setup>
// 频道列表id值变化了就要调用接口获取数据渲染
// 频道列表id值变化了，就做一个打印
import { storeToRefs } from 'pinia'
import { useChannelStore, useNewListStore } from '../stores'
import { watch } from 'vue'
const channelStore = useChannelStore()
const newsListStore = useNewListStore()
const { channelId } = storeToRefs(channelStore)
const { newsList } = storeToRefs(newsListStore)
watch(channelId, newVal => {
  newsListStore.getList(newVal)
})
</script>
<template>
  <div class="list">
    <div
      class="article_item"
      v-for="(item, index) in newsList"
      :key="item.art_id"
    >
      <h3 class="van-ellipsis">{{ item.title }}</h3>
      <div class="img_box">
        <img
          v-for="(i, v) in item.cover.images"
          :key="v"
          :src="i"
          class="w100"
        />
      </div>
      <div class="info_box">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
<style scoped></style>
